<template>
  <div class="food" v-show='showFlag' ref='food'>
    <div class="food-content">
      <!--顶部区域的大图-由于图片是异步加载，因此为了防止抖动---->
      <div class="image-header">
        <img :src="food.image">
        <div class="back" @click='hide'>
          <span class="backfont">&lt;</span>
        </div>
      </div>
      <!--食物说明-->
      <div class="content">
        <!--图片下方食物名称-->
        <h1 class="title">{{food.name}}</h1>
        <!--月售、好评率信息块--->
        <div class="detail">
          <span class="sell-count">月售{{food.sellCount}}</span>
          <span class="rating">好评率{{food.rating}}%</span>
        </div>
        <!--价格（现价，原价）--->
        <div class="price">
          <span class="now">￥{{food.price}}</span><span v-show="food.oldPrice" class="old">￥{{food.oldPrice}}</span>
        </div>
        <!--点击按钮添加商品数量--->
        <div class="cartcontrol-wrapper">
          <cartcontrol :food='food'></cartcontrol>
        </div>
        <!--加入购物车--->
        <div class="buy" v-show="!food.count || food.count===0" @click.stop.prevent='addFirst'>加入购物车</div>
      </div>
      <!--分隔阴影-->
      <split v-show="food.info"></split>
      <!--商品介绍-->
      <div class="info" v-show="food.info">
        <h1 class="title">商品信息</h1>
        <p class="text">{{food.info}}</p>
      </div>
      <!--商品评价，可以选择：全部、推荐、吐槽--->
      <split></split>
      <div class="rating">
        <h1 class="title">商品评价</h1>
        <ratingselect :select-type='selectType'
                      :only-content='onlyContent'
                      :desc='desc'
                      :ratings='food.ratings'
                      @selecttypechange='typechange'
                      @onlycontentchange='contentchange'
        >
        </ratingselect>
        <!--商品评价区块-->
        <div class="rating-wrapper">
          <!--商品评价内容存在，并且长度不为0-？？？？？？？？不同评级的长度为零怎么办--->
          <ul v-show='food.ratings&&food.ratings.length'>
            <li 
              class="rating-item border-bottom"
              v-show='needShow(rating.rateType,rating.text)'
              v-for='(rating,index) in food.ratings' 
              :key='index'
            >
              <!--左侧上方的日期、时间--->
              <div class="time">{{rating.rateTime|formatDate}}</div>
              <!--右侧上方的用户名，头像--->
              <div class="user">
                <span class="name">{{rating.username}}</span>
                <img class="avatar" width="12" height="12" :src="rating.avatar">
              </div>
              <!--下方的评价正文，包含：点赞、文字---->
              <p class="text">
                <!--0为好评&#xe616;，1为差评&#xe612;-->
                <span class="iconfont good" v-if=" rateTypes(rating)">&#xe616;</span>
                <span class="iconfont bad" v-if="!rateTypes(rating)">&#xe612;</span>
                {{rating.text}}
              </p>
            </li>
          </ul>
          <!--商品评价内容不存在---->
          <div class="no-rating" v-show='!food.ratings||!food.ratings.length'>暂无商品评价</div>
        </div>
      </div>
    </div>  
  </div>
</template>

<script>
import Vue from 'vue'
import BScroll from 'better-scroll'
import cartcontrol from '../cartcontrol/cartcontrol'
import split from '../split/split'
import {formatDate} from '../../commen/js/date'
import ratingselect from '../ratingselect/ratingselect'

const POSITIVE = 0;//选好评
const NEGATIVE = 1;//选差评
const ALL = 2;//全选

export default {
  name:'food',
  props:{
    food:{
      type:Object
    }
  },
  data(){//data里面的数据才可以跟踪监控
    return{
      showFlag:false,
      selectType: ALL,
      onlyContent: false,//只查看有内容的评价
      desc: {
        all: '全部',
        positive: '推荐',
        negative: '吐槽'
      }
    }
  },
  //vue的过滤器选项{{ 需要过滤的参数 | 过滤函数名formatDate }}
  filters:{
    formatDate(time){
      let date = new Date(time);
      //正则函数formatDate，用于将时间转化为yyyy-MM-dd hh:mm格式的字符串，使用时需要引入{formatDate}，因为该js文件暴露的是一个函数
      return formatDate(date, 'yyyy-MM-dd hh:mm');
    }
  },
  components:{
    cartcontrol,
    split,
    ratingselect
  },
  methods:{
    //父组件改变组件中的数据 ，以此来切换评价的类型
    contentchange(){
      this.onlyContent=!this.onlyContent;
    },
    typechange(type){
      this.selectType=type;
    },
    //根据选择的评价类型（推荐/吐槽），显示评价内容
    needShow(type,text){
      if(this.onlyContent && !text){
        return false;//点击了‘只看有内容的评价’并且内容为空，即用户评价没有内容不显示，评价列表display:none
      }
      if(this.selectType===ALL){
        return true;//选中‘全部’，显示所有的评价内容
      }else{
        return type===this.selectType;
      }
    },
    //iconfont是赞还是不赞
    rateTypes(rating){
      return rating.rateType===0?true:false
    },
    //点击购物车添加第一件商品
    addFirst(event){
      if(!event._constructed){
        return;
      }
      Vue.set(this.food,'count',1)
    },
    //不带下划线的方法能够被外部调用，带下划线的方法是组件自身调用
    //父组件调用子组件的方法使用$ref
    show(){
      this.showFlag=true
      this.selectType=ALL//初始化,因为该组件会被多个商品使用到，因此每次显示时都初始化一次
      this.onlyContent=false //初始化
      this.$nextTick(()=>{
        if(!this.scroll){
          this.scroll=new BScroll(this.$refs.food,{
            click:true
          })
        }else{
          this.scroll.refresh()
        }
      })
    },
    hide(){
      this.showFlag=false
    }
  }
}
</script>

<style lang="stylus" scoped>
.food 
  position:fixed 
  top:0
  left:0
  bottom:48px 
  z-index:30
  width:100% 
  background-color:#fff
  .food-content
    padding-bottom:20px///////////////////方便查看底部样式
    .image-header
      position:relative//BFC
      width:100%
      height:0
      padding-bottom:100%//此处的padding是依据宽度来算
      img 
        position:absolute
        width:100% 
        height:100%//限定高度
      .back 
        position:absolute 
        top:5px 
        left:5px
        .backfont 
          display:block//为了给按钮设置padding，增大点击区域
          width:20px 
          height:20px
          line-height:20px 
          text-align:center
          padding:10px 10px
          font-size:30px
          color:#fff
          background:rgba(0,0,0,.1)
          border-radius:50%
  .content
    padding:18px
    position: relative
    .title 
      line-height:14px 
      margin-bottom:8px 
      font-size:14px 
      font-weight:700
      color:rgb(7,17,27)
    .detail 
      margin-bottom: 18px
      line-height: 10px
      font-size: 0
      height: 10px 
      .sell-count, .rating
        font-size: 10px
        color: rgb(147, 153, 159)
      .sell-count
        margin-right: 12px
    .price
      font-weight: 700
      line-height: 24px
      .now
        margin-right: 8px
        font-size: 14px
        color: rgb(240, 20, 20)
      .old
        text-decoration: line-through
        color: rgb(147, 153, 159)
        font-size: 10px
    .cartcontrol-wrapper
      position:absolute 
      right:12px 
      bottom:12px 
    .buy 
      position: absolute
      right: 18px
      bottom: 18px
      z-index: 10
      height: 24px
      line-height: 24px
      padding: 0 12px
      box-sizing: border-box
      border-radius: 12px
      font-size: 10px
      color: #fff
      background: rgb(0, 160, 220)
  .info
    padding: 18px
    .title
      line-height: 14px
      margin-bottom: 6px
      font-size: 14px
      color: rgb(7, 17, 27)
    .text
      line-height: 24px
      padding: 0 8px
      font-size: 12px
      color: rgb(77, 85, 93)
  .rating
    padding-top:18px //有一条分隔只看全部的线 因此左右不能有内边距
    .title 
      line-height: 14px
      margin-left: 18px
      font-size: 14px
      color: rgb(7, 17, 27)
    .rating-wrapper 
      padding:0 18px 
      .rating-item
        position:relative 
        padding:16px 0
        &.border-bottom:before
          border-color:rgba(7, 17, 27, 0.1)
        .time
          font-size:12px
        .user 
          position:absolute 
          top:16px 
          right:0 
          font-size:0 
          line-height:12px//使better-scroll计算高度，sroll.refresh
          .name 
            vertical-align:top 
            font-size:10px 
            margin-right:6px
            color:rgb(147,153,159)
          .avatar 
            border-radius:50%
        .time 
          margin-bottom:6px
          line-height:12px 
          font-size:10px 
          color:rgb(147,153,159)
        .text 
          line-height:16px 
          font-size:12px 
          color:rgb(7,17,27)
          .iconfont
            line-height:16px 
            vertical-align:bottom
            &.good 
              margin-right:2px 
              font-size:12px
              color:rgb(0,160,220)
            &.bad
              font-size:19px
              color:rgb(147,153,159)

      .no-rating
        width:100%
        height:50px 
        padding:16px 0
        line-height:50px
        font-size:12px
        color:rgb(17,27,47)
        text-align:center
</style>